<template>
  <div class="personHeadSpan">
    <span class="personTitle">闲置帮</span>
    <div class="personSpan">
      <a style="margin-left: 40%">一个为解决用户回收需求的网站</a>
      <a style="margin-left: 50%">一个专注回收售卖交易服务的网站</a>
    </div>
  </div>

  <div class="personHeadLine"></div>
</template>

<script>
export default {
  setup() {},
};
</script>

<style>
.personHeadMoudle {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 20vh;
  background-color: #faebd7;
}

.personHeadSpan {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 98%;
}

.personTitle {
  display: flex;
  width: 35%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-family: "阿里妈妈刀隶体 Regular";
  font-size: 48px;
  font-weight: 500;
}

@font-face {
  font-family: "阿里妈妈刀隶体 Regular";
  font-weight: 400;
  src: url("//at.alicdn.com/wf/webfont/8nkNB4zy4gRH/ZZOtDoyBAzw0.woff2")
      format("woff2"),
    url("//at.alicdn.com/wf/webfont/8nkNB4zy4gRH/do2ZJIJo82p0.woff")
      format("woff");
  font-display: swap;
}

.personSpan {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 65%;
  height: 100%;
}

.personSpan a {
  font-family: "阿里妈妈方圆体 VF Regular";
  --wght: 600;
  --BEVL: 50;
  font-variation-settings: "wght" var(--wght), "BEVL" var(--BEVL);
  font-size: 20px;
  font-weight: 600;
}

@font-face {
  font-family: "阿里妈妈方圆体 VF Regular";
  src: url("//at.alicdn.com/wf/webfont/8nkNB4zy4gRH/L24bJup2HbAo.woff2")
      format("woff2"),
    url("//at.alicdn.com/wf/webfont/8nkNB4zy4gRH/bfl93ClKKLRG.woff")
      format("woff");
  font-display: swap;
}

.personHeadLine {
  width: 100%;
  height: 5px;
  background-color: black;
}
</style>